<?php
$isRenderDefault = TRUE;
//get activeSpace
$activeSpace = Blyn::app()->getActiveSpace();

//get activeApp
$activeApp = Blyn::app()->getActiveApp();

//current operation
$currentOperation = Blyn::app()->getActiveOperation();

//get all apps of space
$apps = $activeSpace->getApps();

//get operations from app
$ops = $activeApp->getOperations();

//update wechat menu here
if ($currentOperation->getUIManager()->isAjaxLinkClicked('update wechat menu')) {
    //below is a dummy value for wxMenu, actually should get $wxMenu from UI and update to wechat menu
    $wxMenu = array('menu1' => "menu1");
    $activeApp->updateWXMenu($wxMenu);
}

if ($currentOperation->getUIManager()->isAjaxLinkClicked('add wechat menu')) {
    $page = new BUIControl();
    //below is a dummy value for wxMenu, actually should get $wxMenu from UI and update to wechat menu
    $page->addRenderView('addWechatMenu', 'addWechatMenu');
    $page->render();
    $isRenderDefault = FALSE;
}
if ($currentOperation->getUIManager()->isAjaxLinkClicked('Add Menu')) {
    $page = new BUIControl();
    //below is a dummy value for wxMenu, actually should get $wxMenu from UI and update to wechat menu
    $page->addRenderView('addWechatMenu', 'addWechatMenu');
    $page->render();
    $isRenderDefault = FALSE;
}

/**
 * tasks in current operation:
 * 1)let user set wechat group Id here, use to find which wechat group this 
 * space is binding
 * 2)create menus that may exist in wechat group, and assign menu item to some 
 * operation
 * 3)provide one button let user execute bind actions
 */
/**
 * How to get active space:
 * blyn::app()
 */
if ($isRenderDefault) {
    ?>
    <h4 class="text-info">In this view, tasks include:</h4>
    <p>1.let user set wechat group id for bind menu</p>
    <p>2.design menu in tree style,bind menu to one operation.</p>
    <p>3.click "update wechat menu" to bind menu to </p>
    <hr/>
    <script type="text/javascript">
        $(function() {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function(e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    </script>
    <style  type="text/css">
        .tree {
            min-height:560px;
            /*    padding:19px;*/
            margin-bottom:20px;
            background-color:#fbfbfb;
            border:1px solid #999;
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
            -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
        }
        .tree li {
            width:160px;
            list-style-type:none;
            margin:0;
            padding:10px 8px 0 1px;
            position:relative
        }
        .tree li::before, .tree li::after {
            content:'';
            left:-20px;
            position:absolute;
            right:auto
        }
        .tree li::before {
            border-left:1px solid #999;
            bottom:50px;
            height:100%;
            top:0;
            width:1px
        }
        .tree li::after {
            border-top:1px solid #999;
            height:20px;
            top:25px;
            width:25px
        }
        .tree li span {
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            border:1px solid #999;
            border-radius:5px;
            display:inline-block;
            padding:3px 8px;
            text-decoration:none
        }
        .tree li.parent_li>span {
            cursor:pointer
        }
        .tree>ul>li::before, .tree>ul>li::after {
            border:0
        }
        .tree li:last-child::before {
            height:30px
        }
        .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
            background:#eee;
            border:1px solid #94a0b4;
            color:#000
        }
    </style>
    <div class="tree ">
        <ul>
            <li style="width: 30%;float:left;">
                <strong><i class="icon-folder-open"></i> 菜单列表</strong> <a title="添加一级菜单" onclick="AddMenu(1);" href="javascript:void(0);">
                    <img width="20" height="20" alt="添加一级菜单" src="http://wecool.socialmedia.cn/public/wecool/images/app/menu/bottom_menu_12.jpg">
                </a>
                <ul>
                    <li>
                        <span><i class="icon-minus-sign"></i> 商社导航</span>
                        <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                           background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                           background-position: -58px -11px;" href="javascript:void(0);" onclick="EditMenu(10);" title="编辑"></a>
                        <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                           background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                           background-position: -35px -11px;" href="javascript:void(0);" onclick="del('14312');" title="删除"></a>
                        <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                           background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                           background-position: -13px -11px;" href="javascript:void(0);" onclick="AddMenu(10);" title="添加"></a>
                        <ul>
                            <li>
                                <span><i class="icon-leaf"></i> 酒店</span>
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -58px -11px;" href="javascript:void(0);" onclick="EditMenu(11);" title="编辑"></a>
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -35px -11px;" href="javascript:void(0);" onclick="del('14312');" title="删除"></a>
                            </li>
                            <li>
                                <span><i class="icon-leaf"></i> 汽车</span> 
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -58px -11px;" href="javascript:void(0);" onclick="EditMenu(12);" title="编辑"></a>
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -35px -11px;" href="javascript:void(0);" onclick="del('14312');" title="删除"></a>
                            </li>
                            <li>
                                <span><i class="icon-leaf"></i> 电器</span> 
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -58px -11px;" href="javascript:void(0);" onclick="EditMenu(13);" title="编辑"></a>
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -35px -11px;" href="javascript:void(0);" onclick="del('14312');" title="删除"></a>
                            </li>
                            <li>
                                <span><i class="icon-leaf"></i> 超市</span> 
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -58px -11px;" href="javascript:void(0);" onclick="EditMenu(14);" title="编辑"></a>
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -35px -11px;" href="javascript:void(0);" onclick="del('14312');" title="删除"></a>
                            </li>
                            <li>
                                <span><i class="icon-leaf"></i> 百货</span> 
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -58px -11px;" href="javascript:void(0);" onclick="EditMenu(15);" title="编辑"></a>
                                <a style="width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
                                   background: url(http://wecool.socialmedia.cn/public/wecool/images/bottom_menu.png) no-repeat;
                                   background-position: -35px -11px;" href="javascript:void(0);" onclick="del('14312');" title="删除"></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li style="width: 60%;font-size: 10px;float:right">
                <div>

                    <form class="form-horizontal">
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label" for="input01" style="width: 100px;">菜单标题：</label>
                                <div class="controls" style="margin-left:10px;">
                                    <input type="text" class="input-xlarge" id="menu_name" name="menu_name" style="width: 160px;">
                                    <p class="help-block" style="margin-left: 20px;
                                       width: 260px;">
                                        注：一级菜单文字不超过4个汉字或8个字母，
                                        二级菜单标题最多不得超过8个汉字或16个字母。
                                    </p>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="select01" style="width: 100px;">回复类型：</label>
                                <div class="controls" style="margin-left: 0px;">
                                    <select onchange="SelectMenuType()" id="MenuTypeList" style="width: 180px;"  class="menuTypeList">
                                        <option value="0">文字</option>
                                        <option value="1">其他链接</option>
                                        <option value="2">单图文</option>
                                        <option>多图文</option>
                                        <option>微活动</option>

                                    </select>
                                </div>
                                <script>
                                function SelectMenuType() {
                                    var MenuTypeList = document.getElementById("MenuTypeList");
                                    var content = MenuTypeList.options[MenuTypeList.selectedIndex].value;
                                    if (content == "0")
                                    {
                                        document.getElementById("textarea").style.display = '';
                                        document.getElementById("otherLink").style.display = 'none';
                                    }
                                    if (content == "1")
                                    {
                                        document.getElementById("textarea").style.display = 'none';
                                        document.getElementById("otherLink").style.display = '';
                                    }
                                }
                                function del(id) {
                                    if (confirm("确认删除此菜单项？")) {
                                        $.post("URL", {id: id}, function(msg) {
                                            if (msg == 'success') {
                                                window.location.reload();
                                            }
                                        });
                                    }
                                }
                                function EditMenu(id) {
                                    if (id > 0)
                                        $("#menu_name").val("该id所对应的MenuName");
                                }
                                function AddMenu(id) {
                                    if (id > 0)
                                        $("#menu_name").val("");
                                }

                                </script>

                            </div>


                            <div class="control-group" id="textarea"  style="display:block">
                                <!--            <label class="control-label" for="textarea">文本域</label>-->
                                <div class="controls" style="margin-left: 30px;">
                                    <textarea class="input-xlarge"  rows="3"></textarea>
                                </div>
                            </div>
                            <div class="control-group" id="otherLink" style="display: none" >
                                <div class="controls" style="margin-left: 30px;">
                                    <!--            <label class="control-label" for="textarea">文本域</label>-->
                                    <input type="text"  value="http://" style=" width: 270px;">
                                </div>
                            </div>

                            <div class="form-actions" style="margin-left: 30px;width: 200px;padding-left: 90px;">
                                <button type="submit" class="btn btn-primary">保存更改</button>
                                <button class="btn">取消</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </li>
        </ul>
    </div>



    <p><?php echo $currentOperation->getUIManager()->getAjaxLink('add wechat menu', array('htmlOptions' => array('class' => 'btn'))); ?></p>

    <p><?php echo $currentOperation->getUIManager()->getAjaxLink('update wechat menu', array('htmlOptions' => array('class' => 'btn'))); ?></p>

<?php } ?>